<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form-item>
          <el-button type="primary" plain @click="addDialogShow=true">添加</el-button>
        </el-form-item>
        <el-table :data="adminList" border>
          <el-table-column prop="id" label="ID" width="50px" />
          <el-table-column prop="username" label="用户名"  />
          <el-table-column prop="realname" label="真实姓名" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="email" label="邮箱"/>
          <el-table-column prop="createTime" label="注册时间" />
          <el-table-column label="状态" align="center">
            <template #default="scope">
              <el-switch v-model="scope.row.status"
                         inline-prompt
                         :inactive-value="1"
                         :active-value="0"
                         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                         inactive-text="禁用"
                         active-text="启用"
                         @change="updateStatus(scope.row)"
              />

            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button size="small" plain type="warning" @click="resetPassword(scope.row)">
                重置密码
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>

  <!-- 添加管理员信息开始 -->
  <el-dialog v-model="addDialogShow" title="添加管理员" width="500">
    <el-form>
      <el-form-item label="用户名" label-width="20%">
        <el-input  v-model="adminAdd.username"  placeholder="请输入用户名" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item  label="电话" label-width="20%">
        <el-input  v-model="adminAdd.phone"  placeholder="请输入电话" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input  v-model="adminAdd.email" placeholder="请输入邮箱" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input  v-model="adminAdd.realname" placeholder="请输入真实姓名" autocomplete="off" style="width: 300px"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false">
          取消
        </el-button>
        <el-button type="primary" @click="insert">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加管理员信息结束 -->

</template>

<script setup>
import adminApi from "@/api/adminApi.js";
import {ref} from "vue";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import categoryApi from "@/api/categoryApi.js";


//所有管理员信息
const adminList = ref();
const addDialogShow = ref(false);
//添加管理员
const adminAdd = ref({
  username:null,
  phone:null,
  email:null,
  realname:null,
  createTime:null,
  status:0,
})

// const now = new Date();
// const year = now.getFullYear();
// const month = ('0' + (now.getMonth() + 1)).slice(-2);
// const day = ('0' + now.getDate()).slice(-2);
// const formattedTime = `${year}-${month}-${day}`
// console.log(formattedTime)

//添加
function insert() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.insert(adminAdd.value)
      .then(resp => {
        loading.close();
        if (resp.code == 10000) {
          ElMessage({
            message: resp.msg,
            type: 'success',
            duration: 1500
          })
          addDialogShow.value = false;
          selectAll();
        } else {
          ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 1500
          });
        }
      });
}

function selectAll(){
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.selectAll()
      .then(resp => {
        loading.close();
        adminList.value = resp.data;
      });
}

//修改状态
function updateStatus(admin) {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.updateStatus(admin)
      .then(resp => {
        loading.close();
        if (resp.code == 10000) {
          ElMessage({
            message: resp.msg,
            type: 'success',
            duration: 1500
          })
          selectAll();
        } else {
          ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 1500
          });
        }
      });
}

//重置密码
function resetPassword(admin) {
  ElMessageBox.confirm(
      '确认重置密码?',
      '删除',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        adminApi.resetPassword(admin)
            .then(resp => {
              if (resp.code == 10000) {
                ElMessage({
                  message: resp.msg,
                  type: 'success',
                  duration: 1500
                })
                selectAll();
              } else {
                ElMessage({
                  message: resp.msg,
                  type: 'error',
                  duration: 1500
                });
              }
            })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消重置',
        })
      })
}
selectAll();
</script>

<style scoped>

</style>